<template>
	<wallet-select-bank
		class="mx-[35px]"
		:options="list"
		modifyClass="bg-bg-3 pl-[12px]"
		v-model:modelValue="bankValue" />
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useWalletStore } from '@/store'
import WalletSelectBank from '@/views/wallet/components/wallet-select-bank.vue'
import { fmtMobile } from '@/utils'
import { bankType, WalletType } from '@/enums'

const walletStore = useWalletStore()
const isBank: any = computed(() => bankType.includes(Number(walletStore.withdrawData.type)))

const list: any = computed({
	get: () => {
		return isBank.value
			? walletStore.cards.map((item: any) => ({
					id: item.id,
					text: item.bankName,
					content: fmtMobile(item.cardNumber),
					img: item.bankIcon,
					type: 'server'
				}))
			: walletStore.addresses.map((item: any) => ({
					id: item.id,
					text: item.crypto,
					content: fmtMobile(item.address, 9, 10),
					img: `wallet-type/${WalletType.usdt.id}.png`
				}))
	},
	set: (newValue) => (list.value = newValue)
})

const bankValue = ref('')
</script>
<style lang="scss" scoped>
:deep(.wallet-select-bank) {
	background-color: var(--color-text-3);
}
</style>
